<template>
  <div class="DragTest">
    <vuedraggable
      class="left"
      v-model="list1"
      group="people"
      :options="dragOptions"
    >
      <transition-group tag="div">
        <div
          v-for="item in list1"
          :key="item"
          class="item"
        >
          <p>{{ item }}</p>
        </div>
      </transition-group>
    </vuedraggable>

    <vuedraggable
      class="right"
      v-model="list2"
      group="people"
      :options="dragOptions"
    >
      <transition name="el-fade-in-linear">
        <transition-group tag="div">
          <div
            v-for="(item,index) in list2"
            :key="index+ '2'"
            class="item"
          >
            <span>{{ item }}</span>
            <el-button @click="move('up',index,list2)">上</el-button>
            <el-button @click="move('down',index,list2)">下</el-button>
          </div>
        </transition-group>
      </transition>
    </vuedraggable>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'
export default {
  name: "DragTest",
  data () {
    return {
      dragOptions:{
        animation: 120,
        scroll: true,
        group: 'sortlist',
        ghostClass: 'ghost-style'
      },
      list1: [1,3,5,7,9],
      list2: [2,4,6,8,10]
    }
  },
  components: {
    vuedraggable
  },
  methods: {
    move(direction, index, list = []) {
      if(direction === 'up' && index !== 0) {
        let a = list[index-1]
        list[index-1] = list[index]
        list[index] = a
        this.list2 = JSON.parse(JSON.stringify(list))
      }
      if(direction === 'down' && index < list.length-1) {
        let a = list[index+1]
        list[index+1] = list[index]
        list[index] = a
        this.list2 = JSON.parse(JSON.stringify(list))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.DragTest{
  display: flex;
  ::v-deep .item{
    width: 300px;
    height: 50px;
    background-color: #42b983;
    color: #ffffff;
    margin-top: 10px;
    transform: scale(0.9);
  }
  ::v-deep .left, .right {
    display: block;
    width: 40%;
    height: 500px;
    border: 2px solid #333;
    background-color: bisque;
    overflow:auto;

    > div{
      height: 100%;
      overflow:auto;
      // margin-top: -6px;
    }
  }
}
</style>
